<template>
  <div>
    <!-- 提示框 -->
    <div class="Cdgl_chao">
      <h4 style="margin-left: 1%;">操作说明:</h4>
      <p class="Cdgl_p">* 该功能主要用于菜单的修改，添加。！注意该功能自有超管可以使用</p>
    </div>
    <!-- 上下分级 -->
    <div style="overflow: hidden;margin-top: 1%">
      <div>
        <el-button style="margin-right:1%;float: right;" type="primary" icon="el-icon-circle-plus" @click="tiancaidans">添加菜单</el-button>
      </div>
      <div style="margin-left: 2%;">
          <el-table
            :data="CjiFen"
            style="width: 100%">
            <el-table-column type="expand">
              <template slot-scope="props">
                <div>
                  <el-table
                    :data="props.row.menusons"
                    :show-header="false"
                    style="width: 100%"
                    >
                    <el-table-column
                      prop="id"
                      label="序号"
                      type="index"
                      width="371">
                    </el-table-column>
                    <el-table-column
                      prop="name"
                      label="菜单名称"
                      >
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="菜单地址">
                    </el-table-column>
                    <el-table-column
                      prop="status"
                      label="是">
                    </el-table-column>
                    <el-table-column
                      fixed="right"
                      label="操作"
                      width="350">
                      <template slot-scope="scope">
                        <el-button @click="Zhi_bianji(scope.$index, props.row.menusons)" size="mini" type="primary">
                          编辑
                        </el-button>
                        <el-button
                          @click.native.prevent="open(scope.$index, props.row.menusons)"
                          type="text"
                          size="small">
                          移除
                        </el-button>                    
                      </template>
                    </el-table-column>
                  </el-table>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              label="ID"
              prop="id">
            </el-table-column>
            <el-table-column
              label="菜单名称"
              prop="name">
            </el-table-column>
            <el-table-column
              label="菜单地址"
              prop="desc">
            </el-table-column>
            <el-table-column
              label="菜单状态"
              prop="status">
            </el-table-column>
            <el-table-column
              fixed="right"
              label="操作"
              width="350">
              <template slot-scope="scope">
                <el-button
                  slot="trigger"
                  size="small"
                  type="primary"
                  @click="TjiaZiCaiDan(scope.$index, CjiFen)">
                  上传子菜单
                </el-button>
                <el-button @click="fatherBianJi(scope.$index, CjiFen)" size="mini" type="primary">
                  编辑
                </el-button>
                <el-button
                  @click.native.prevent="fateropen(scope.$index, CjiFen)"
                  size="mini" type="danger">
                  <!--type="text"
                  size="small" -->
                  移除
                </el-button>
              </template>
            </el-table-column>
          </el-table>
          <!-- 添加菜单弹窗 -->
        <el-dialog
          title="添加菜单"
          :visible.sync="dialogVisible"
          width="30%"
          :before-close="handleClose"
        >
          <el-form
            :model="Tjian"
            :rules="rules"
            ref="Tjian"
            label-width="100px"
            class="demo-CjiFen"
          >
            <el-form-item label="菜单名字" prop="name">
              <el-input v-model="Tjian.name" style="width:217px"></el-input>
            </el-form-item>
            <el-form-item label="菜单分级">
              <el-select v-model="Tjian.menufather_name" placeholder="请选择等级">
                <el-option v-for="(i,index) in arr" :key="index"
                :label="i.name" :value="i.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="菜单地址" prop="address">
              <el-input v-model="Tjian.address" style="width:217px"></el-input>
            </el-form-item>
            <el-form-item label="菜单排序" prop="sorting">
              <el-input v-model="Tjian.sorting" style="width:217px"></el-input>
            </el-form-item>
            <el-form-item label="菜单状态" prop="status">
              <el-select v-model="Tjian.status" placeholder="有效">
                <el-option label="有效" value="是"></el-option>
                <el-option label="无效" value="否"></el-option>
              </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="TianJia()"
              >确认</el-button>
          </span>
        </el-dialog>
          <!-- 添加菜单弹窗 ps: 子菜单-->
        <el-dialog
          title="添加子菜单"
          :visible.sync="dialogVisibles"
          width="30%"
          :before-close="handleClose"
        >
          <el-form
            :model="TjianSon"
            :rules="rules"
            ref="TjianSon"
            label-width="100px"
            class="demo-CjiFen"
          > 
            <el-form-item label="子菜单名字" prop="name">
              <el-input v-model="TjianSon.name" style="width:217px"></el-input>
            </el-form-item>
            <el-form-item label="菜单分级">
              <el-select disabled  v-model="TjianSon.menufather_name" ></el-select>
            </el-form-item>
            <el-form-item label="子菜单地址" prop="address">
              <el-input v-model="TjianSon.address" style="width:217px"></el-input>
            </el-form-item>
            <el-form-item label="子菜单排序" prop="sorting">
              <el-input v-model="TjianSon.sorting" style="width:217px"></el-input>
            </el-form-item>
            <el-form-item label="子菜单状态" prop="status">
              <el-select v-model="TjianSon.status" placeholder="有效">
                <el-option label="有效" value="是"></el-option>
                <el-option label="无效" value="否"></el-option>
              </el-select>
            </el-form-item> 
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisibles = false">取 消</el-button>
            <el-button type="primary" @click="TianJiaZhiC()"
              >确认</el-button>
          </span>
        </el-dialog>
         <!-- 编辑菜单弹窗 ps: 子菜单-->
        <el-dialog
          title="编辑子菜单"
          :visible.sync="drawer"
          width="30%"
          :before-close="handleClose"
        >
          <el-form
            :model="BianjiSon"
            :rules="rules"
            ref="BianjiSon"
            label-width="100px"
            class="demo-CjiFen"
          > 
            <el-form-item label="子菜单名字" prop="name">
              <el-input v-model="BianjiSon.name" style="width:217px"></el-input>
            </el-form-item>
            <el-form-item label="子菜单分级">
              <el-select v-model="BianjiSon.menufather_name">
                <el-option v-for="(i,index) in arr" :key="index"
                :label="i.name" :value="i.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="子菜单地址" prop="address">
              <el-input v-model="BianjiSon.address" style="width:217px"></el-input>
            </el-form-item>
            <el-form-item label="子菜单排序" prop="sorting">
              <el-input v-model="BianjiSon.sorting" style="width:217px"></el-input>
            </el-form-item>
            <el-form-item label="子菜单状态" prop="status">
              <el-select v-model="BianjiSon.status" placeholder="有效">
                <el-option label="有效" value="是"></el-option>
                <el-option label="无效" value="否"></el-option>
              </el-select>
            </el-form-item> 
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="BianJiQuX()">取 消</el-button>
            <el-button type="primary" @click="BianJi()"
              >确认</el-button>
          </span>
        </el-dialog>
        <!-- 父级菜单编辑弹窗 -->
        <el-dialog
          title="编辑菜单"
          :visible.sync="fatherdrawer"
          width="30%"
          :before-close="handleClose"
        >
          <el-form
            :model="fatherBianji"
            :rules="rules"
            ref="fatherBianji"
            label-width="100px"
            class="demo-CjiFen"
          > 
            <el-form-item label="菜单名字" prop="name">
              <el-input v-model="fatherBianji.name" style="width:217px"></el-input>
            </el-form-item>
            <el-form-item label="菜单分级">
              <el-select v-model="fatherBianji.menufather_name">
                <el-option v-for="(i,index) in arr" :key="index"
                :label="i.name" :value="i.name"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item label="菜单地址" prop="address">
              <el-input v-model="fatherBianji.address" style="width:217px"></el-input>
            </el-form-item>
            <el-form-item label="菜单排序" prop="sorting">
              <el-input v-model="fatherBianji.sorting" style="width:217px"></el-input>
            </el-form-item>
            <el-form-item label="菜单状态" prop="status">
              <el-select v-model="fatherBianji.status" placeholder="有效">
                <el-option label="有效" value="是"></el-option>
                <el-option label="无效" value="否"></el-option>
              </el-select>
            </el-form-item> 
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="BianJiQuX()">取 消</el-button>
            <el-button type="primary" @click="FatherBTian()"
              >确认</el-button>
          </span>
        </el-dialog>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 提示标题
      Tishi:'',
      dialogVisible:false,
      // 父级菜单编辑弹窗
      fatherdrawer:false,      
      // 子菜单编辑
      drawer:false,
      // 子菜单编辑
      BianjiSon:{
          jname:'',
          name:'',
          address:'',
          status:'',
          sorting:'',
          menufather_name:'',
      },
      // 子菜单弹窗
      dialogVisibles:false,
      // 父级菜单
      fatherBianji:{
          jname:'',
          name:'',
          address:'',
          status:'',
          sorting:'',
          menufather_name:'',
      },
      CjiFen: [],
      tableData: [],
      arr:[{
        name:'顶级菜单'
      }],
      deletename:'',
      Tjian:{
          name:'',
          address:'',
          status:'',
          sorting:'',
          menufather_name:'',
      },
      // 子菜单
      TjianSon:{
          name:'',
          address:'',
          status:'',
          sorting:'',
          menufather_name:'',
      },
    };
  },
  methods: {
    caidan() {
      this.$http.get("/api/getmenutotal").then(res => {
        console.log(res.data);
        this.CjiFen = res.data
        console.log(this.CjiFen);
      });
    },
    // 删除子菜单
    deleteSon(){
        let name = this.deletename
        let _ = this.$http
        _.post("/api/delson",{
          name:name
        }).then(res => {
          console.log(res.data);
          this.CjiFen = res.data
        });
    },
    // 删除子级提示框
    open(value,tableData) {
      this.deletename = tableData[value].name
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteSon(),
        this.$message({
          type: 'success',
          message: '删除成功!',
        })
        setTimeout(location.reload(),1000)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    // 删除父菜单
    deleteFater(){
        let name = this.deletename
        let _ = this.$http
        _.post("/api/delfather",{
          name:name
        }).then(res => {
          console.log(res.data);
          if(res.data.code == 201){
            alert(res.data.msg)
          }
        });
    },
    //  删除父级提示框
    fateropen(value,tableData) {
      console.log(tableData[value].name)
      this.deletename = tableData[value].name
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.deleteFater(),
        this.$message({
          type: 'success',
          message: '删除成功!',
        })
        setTimeout(location.reload(),1000)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });          
      });
    },
    // 获取菜单分级
    CaiDanFenJ(){
      this.$http.get("/api/getmenuname").then(res =>{
        console.log(res.data)
        this.arr = res.data
      })
    },
    // 添加·菜单
    tiancaidans(){
      this.dialogVisible = true
      this.CaiDanFenJ()
    },
    TianJia(){
      let data = this.Tjian
      if(data.status != ''){
        this.$http.post("/api/cremenu",
          data).then(res => {
            if(res.data.code == 200){
              setTimeout(location.reload(),500)
            }else{
              alert(res.data + '自己翻译去')
            }
        });        
      }else{
        alert("菜单状态为空")
      }
    },
    // 在父级下上传子菜单 
    TjiaZiCaiDan(value,Data){
      this.zicaidan = Data[value].name
      this.TjianSon.menufather_name = this.zicaidan
      this.dialogVisibles = true
    },
    TianJiaZhiC(){
      let data = this.TjianSon
      if(data.status != ''){
        this.$http.post("/api/cremenu",
          data).then(res => {
            if(res.data.code == 200){
              setTimeout(location.reload(),500)
            }else{
              alert(res.data + '自己翻译去')
            }
        });        
      }else{
        alert("菜单状态为空")
      }
    },
    // 子菜单编辑弹窗
    Zhi_bianji(value,tableData){
      this.drawer = true
      this.CaiDanFenJ()
      this.BianjiSon = {
          jname:tableData[value].name,
          name:tableData[value].name,
          address:tableData[value].address,
          status:tableData[value].status,
          sorting:tableData[value].sorting,
          menufather_name:tableData[value].menufather_name,
      }
    },
    // 子编辑发送
    BianJi(){
      this.$confirm('此操作会永久替代修改文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.BianJideleteSon(),
        this.$message({
          type: 'success',
          message: '编辑成功!',
        })
        setTimeout(location.reload(),1000)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消编辑'
        });          
      });
    },
    // 编辑post
    BianJideleteSon(){
      let arr = this.BianjiSon
      this.$http.post('/api/sonupdate',arr).then(res =>{
        if(res.code == 200){
          setTimeout(location.reload(),500)
        }else{
          alert(`编辑失败 :` + res.data)
        }
      })
    },
    // 子菜单编辑取消
    BianJiQuX(){
      this.drawer = false
      this.BianjiSon = {
          jname:'',
          name:'',
          address:'',
          status:'',
          sorting:'',
          menufather_name:'',
      }
      this.fatherdrawer = false
      this.fatherBianji = {
          jname:'',
          name:'',
          address:'',
          status:'',
          sorting:'',
          menufather_name:'',
      }
    },
    // 父级菜单编辑
    fatherBianJi(value,tableData){
      this.fatherdrawer = true
      this.CaiDanFenJ()
      this.fatherBianji = {
          jname:tableData[value].name,
          name:tableData[value].name,
          address:tableData[value].address,
          status:tableData[value].status,
          sorting:tableData[value].sorting,
          menufather_name:tableData[value].type,
      }
    },
    FatherBTian(){
      this.$confirm('此操作会永久替代修改文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.FaterShong(),
        this.$message({
          type: 'success',
          message: '修改成功!',
        })
        setTimeout(location.reload(),1000)
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消修改'
        });
      });
    },
    //父级菜单编辑发送
    FaterShong(){
      let arr = this.fatherBianji
      this.$http.post('/api/fatherupdate',arr).then(res =>{
        if(res.code == 200){
          setTimeout(location.reload(),500)
        }else{
          alert(`编辑失败 :` + res.data)
          console.log(res)
        }
      })
    }, 
  },
  watch:{
    'dialogVisibles'(newValue){
      if(newValue == false) {
        this.TjianSon = {
          name:'',
          address:'',
          status:'',
          sorting:'',
          menufather_name:'',
        }
      }
    }
  },
  created() {
    this.caidan();
  },
};
</script>

<style scoped>
.Cdgl_chao {
  border-radius: 15px;
  line-height: 30px;
  background-color: rgb(212, 306, 301);
  margin-top: 15px;
  margin-left: 4%;
}
.Cdgl_p {
  font-size: 12px;
  padding-left: 1%;
}
.li {
  float: left;
  margin: 0px 50px;
}
</style>